<template>
  <van-popup
    :value="value"
    @input="$emit('input',$event)"
    position="bottom"
    :style="{ height: '95%' }"
    closeable
    close-icon-position="top-left"
    round
    @closed="isEdit=false"
  >
    <div class="channel">
      <div class="channel-head">
        <div>
          <span class="title">我的频道</span>
          <span class="desc">点击进入频道</span>
        </div>
        <div>
          <van-button type="danger" plain size="mini" round @click="isEdit=!isEdit">{{isEdit?'完成':'编辑'}}</van-button>
        </div>
      </div>
      <van-grid class="channel-content" :gutter="10" clickable>
        <van-grid-item v-for="(item,k) in channelList" :key="item.id" @click="clkChannel(item,k)">
          <span class="text" :style="{color:k===activeChannelIndex?'red':''}">{{item.name}}</span>
          <van-icon v-show="isEdit && k>0" class="close-icon" name="close" @click="userToRest(item,k)" />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <div class="channel-head">
        <div>
          <span class="title">频道推荐</span>
          <span class="desc">点击添加频道</span>
        </div>
      </div>
      <van-grid class="channel-content" :gutter="10" clickable>
        <van-grid-item v-for="item in restChannel" :key="item.id" @click="restUser(item)">
          <div class="info">
            <span class="text">{{item.name}}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </van-popup>
</template>

<script>
import { apiChannelAll, apiChannelAdd, apiChannelDel } from '@/api/channel.js'
export default {
  name: 'com-channel',
  data () {
    return {
      isEdit: false,
      channelAll: []
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    channelList: {
      type: Array,
      default: () => []
    },
    activeChannelIndex: {
      type: Number,
      default: 0
    }
  },
  computed: {
    restChannel () {
      const userChannelIDs = this.channelList.map(item => { return item.id })
      const rest = this.channelAll.filter(item => {
        return !userChannelIDs.includes(item.id)
      })
      return rest
    }
  },
  created () {
    this.getChannelAll()
  },
  methods: {
    clkChannel (channel, index) {
      if (this.isEdit && index > 0) {
        return this.userToRest(channel, index)
      }
      this.$emit('input', false)
      this.$emit('update:activeChannelIndex', index)
    },
    userToRest (channel, index) {
      this.channelList.splice(index, 1)
      apiChannelDel(channel)
      if (index === this.channelList.length && this.activeChannelIndex === index) {
        this.$emit('update:activeChannelIndex', index - 1)
      }
    },
    restUser (channel) {
      this.channelList.push(channel)
      apiChannelAdd(channel)
    },
    async getChannelAll () {
      const result = await apiChannelAll()
      this.channelAll = result.channels
    }
  }
}
</script>

<style lang="less" scope>
.channel {
  margin-top:70px;
  .channel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .title {
      font-size: 30px;
      margin-right: 5px;
    }
    .desc {
      font-size: 16px;
      color:gray;
    }
  }
  .channel-content {
    .text {
      font-size: 16px;
    }
    .active {
      color: red;
    }
    .close-icon {
      font-size: 20px;
      position: absolute;
      top: -5px;
      right: -5px;
      z-index: 999;
      background-color: #fff;
    }
    .info {
      display: flex;
      align-items: center;
    }
  }
}
</style>
